<template>
  <el-tabs v-model="activeName" class="marginLeft20" @tab-click="handleClick">
    <el-tab-pane label="备件库存报表" name="first">
      <div id="picpicpic" class="pic">
        <div id="condition1" class="condition">
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="demo-input-suffix select-div">
                <div style="display: inline-block">筛选周期：</div>
                <div style="display: inline-block">
                  <el-date-picker v-model="value2" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" />
                </div>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="demo-input-suffix select-div">
                筛选范围：
                <el-select v-model="value" class="select" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="demo-input-suffix select-div">
                图表类型：
                <el-select v-model="value" class="select" placeholder="请选择">
                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </el-col>
          </el-row>
        </div>
        <div id="echarts1" class="mt20" style="width: 100%;height: 300px;" />
        <div>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="date" label="日期" width="180" />
            <el-table-column prop="name" label="设备名称" width="180" />
            <el-table-column prop="num" label="数量" />
          </el-table>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="出入库汇总表" name="second">
      <div class="pic">
        <div class="condition">
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="demo-input-suffix select-div">
                <div style="display: inline-block">筛选周期：</div>
                <div style="display: inline-block">
                  <el-date-picker v-model="value2" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" />
                </div>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="demo-input-suffix select-div">
                筛选范围：
                <el-select v-model="value" class="select" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="demo-input-suffix select-div">
                图表类型：
                <el-select v-model="value" class="select" placeholder="请选择">
                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </el-col>
          </el-row>
        </div>
        <div id="echarts2" style="width: 100%; height: 300px; margin: 20px auto;" />
        <div>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="date" label="日期" width="180" />
            <el-table-column prop="name" label="设备名称" width="180" />
            <el-table-column prop="num" label="数量" />
          </el-table>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="物料计划采购清单" name="third">
      <div class="pic">
        <div class="condition">
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="demo-input-suffix select-div">
                <div style="display: inline-block">筛选周期：</div>
                <div style="display: inline-block">
                  <el-date-picker v-model="value2" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" />
                </div>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="demo-input-suffix select-div">
                筛选范围：
                <el-select v-model="value" class="select" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="demo-input-suffix select-div">
                图表类型：
                <el-select v-model="value" class="select" placeholder="请选择">
                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </el-col>
          </el-row>
        </div>
        <div id="echarts3" style="width: 100%; height: 300px; margin: 20px auto;" />
        <div>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="date" label="日期" width="180" />
            <el-table-column prop="name" label="设备名称" width="180" />
            <el-table-column prop="num" label="数量" />
          </el-table>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="大额备件返库清单" name="fourth">
      <div class="pic">
        <div class="condition">
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="demo-input-suffix select-div">
                <div style="display: inline-block">筛选周期：</div>
                <div style="display: inline-block">
                  <el-date-picker v-model="value2" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" />
                </div>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="demo-input-suffix select-div">
                筛选范围：
                <el-select v-model="value" class="select" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="demo-input-suffix select-div">
                图表类型：
                <el-select v-model="value" class="select" placeholder="请选择">
                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </el-col>
          </el-row>
        </div>
        <div id="echarts4" style="width: 100%; height: 300px; margin: 20px auto;" />
        <div>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="date" label="日期" width="180" />
            <el-table-column prop="name" label="设备名称" width="180" />
            <el-table-column prop="num" label="数量" />
          </el-table>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
const echarts = require('echarts')
export default {
  data() {
    return {
      activeName: 'first',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: '',
      options: [{
        value: '选项1',
        label: '车间'
      }, {
        value: '选项2',
        label: '生产线'
      }],
      options2: [{
        value: '选项1',
        label: '折线图'
      }, {
        value: '选项2',
        label: '饼状图'
      }],
      value: '',
      tableData: [{
        date: '2016-05-02',
        name: '断路器',
        num: '200'
      }, {
        date: '2016-05-04',
        name: '断路器',
        num: '200'
      }, {
        date: '2016-05-01',
        name: '断路器',
        num: '200'
      }, {
        date: '2016-05-03',
        name: '断路器',
        num: '200'
      }]
    }
  },
  mounted() {
    this.leftHeight = `height: ${this.tableMaxHeight}`
    /* ECharts图表 */
    const myChart1 = echarts.init(document.getElementById('echarts1'))
    this.$nextTick(() => {
      myChart1.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          data: ['300车身', '160涂装', '80总装', '540合计']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '300车身',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '160涂装',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '80总装',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '540合计',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          }
        ],
        color: ['#28d4ac', '#8f87ff', '#ff717d', '#ffa427']
      })
      myChart1.resize()
    })
    window.onresize = function() {
      myChart1.resize()
    }
  },
  methods: {
    handleClick(tab) {
      console.log(tab.index)
      if (tab.index === '1') {
        const myChart2 = echarts.init(document.getElementById('echarts2'))
        this.$nextTick(() => {
          myChart2.setOption({
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: 'bottom'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                  { value: 335, name: '扩展单元' },
                  { value: 310, name: '断路器' },
                  { value: 234, name: '空气开关' },
                  { value: 135, name: '交流接触器' },
                  { value: 154, name: '小型断路器' }
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ],
            color: ['#28d4ac', '#8f87ff', '#ff717d', '#ffa427', '#5c95fe']
          })
          myChart2.resize()
        })
        window.onresize = function() {
          myChart2.resize()
        }
      }
      if (tab.index === '2') {
        const myChart3 = echarts.init(document.getElementById('echarts3'))
        this.$nextTick(() => {
          myChart3.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: 'Direct',
                type: 'bar',
                barWidth: '60%',
                data: [10, 52, 200, 334, 390, 330, 220, 100, 100, 200, 210, 400]
              }
            ],
            color: ['#5c95fe']
          })
          myChart3.resize()
        })
        window.onresize = function() {
          myChart3.resize()
        }
      }
      if (tab.index === '3') {
        const myChart4 = echarts.init(document.getElementById('echarts4'))
        this.$nextTick(() => {
          myChart4.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: 'Direct',
                type: 'bar',
                barWidth: '60%',
                data: [10, 52, 200, 334, 390, 330, 220, 100, 100, 200, 210, 100]
              }
            ],
            color: ['#5c95fe']
          })
          myChart4.resize()
        })
        window.onresize = function() {
          myChart4.resize()
        }
      }
    }
  }
}
</script>

<style>
.select{
  width: 200px;
}
.condition{
  text-align: center;
}
.condition .select-div{
  display: inline-block;
}
</style>
